<template>
	<view class="content">
		
		<view class="borde-padd-24">
			<view class="border-top-list flex" @click="goPages('/pages/courseDetails/index?id='+item.id)"  v-for="(item,index) in special_list">
				<image class="left-ings" :src="item.image" mode=""></image>
				<view class="conterArr">
					<view class="ellipsis title">{{item.title}}</view>
					<view class="conte">
						<text class="lis" v-for="item in item.label">{{item}}</text>
					</view>
					
					<view class="flex money" v-if="item.money!='0.00'">
						<text class="fuho">¥</text>
						{{item.money}}
					</view>
					<view class="flex money" v-else>
						免费
					</view>
				</view>
			</view>
		</view>
		<footerTer :active="1"></footerTer>
	</view>
</template>

<script>
	import footerTer from "../../components/footer_n.vue"
	import {
		Request
	} from '@/utils/request.js'
	// api/special/get_grade_cate
	export default {
		components:{
			footerTer
		},
	    data() {
	        return {
	            indicatorDots: false,
				tabData:[],
				special_list:[],
				imgUrl:this.imgUrl,
				tabIndex:4,
				jobConList:[],
	        }
	    },
		onLoad({index}) {
			// this.tabIndex=index||0;
			this.specialGet_grade_cate();
			this.specialGet_special_list();
		},
	    methods: {
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			tabIndexFunsc(e){
				this.special_list=[];
				this.tabIndex=e;
				this.specialGet_special_list()
				// index==tabIndex
			}, 
			sousyi(e){
				this.specialGet_special_list(e.detail.value)
			},
	       specialGet_grade_cate(){
			   Request('special/get_grade_cate').then(list => {
			   	const tdata = list || [];
			   	this.tabData = tdata;
			   })
		   },
		   search(e){
		   	this.jobConList=[];
		   	this.page=1;
		   	this.joblist();
		   },	
			joblist(){
				Request('job/list',{
					title:this.searchTitle,
					page:this.page,
					nature_cn:this.natureCn[this.tabIndex]=='全部'?'':this.natureCn[this.tabIndex],
					...this.FormData
				}).then(({data}) => {
					const tdata = data || [];
					this.jobConList = this.jobConList.concat(tdata);
				})
			},
			  
		   specialGet_special_list(search){
			   let tabData=this.tabData;
			   Request('special/get_special_list',{
				  // type:3,
				   subject_id:tabData.length?tabData[this.tabIndex].children[0].id:'',
			   }).then(list => {
				const tdata = list || [];
				this.special_list =this.special_list.concat(tdata)
			   })
		   }
	    }
	}
	
</script>

<style scoped>
	.content{
		padding-top: 20rpx !important;
	}
	.flex-top-header{
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		z-index: 9;
		padding-top: 90rpx;
		padding-bottom: 20rpx;
	}
	/* .content{
		padding-top: 260rpx !important;
	} */
	.flex-top-header .search{
		height: 68rpx;
		background: #F7F8FA;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
	}
	.flex-top-header .search-img{
		width: 28rpx;
		height: 28rpx;
		margin-right: 24rpx;
	}
	.flex-top-header .input{
		width: 104rpx;
		height: 37rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.sch{
		font-size: 24rpx;
		border-radius: 20rpx;
		width: 140rpx;
		color: #ffffff;
		border: 2rpx solid #E8A03D;
		font-weight: 800;
		background-color: #E8A03D;
	}
	
	.saoxuan{
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-top: 34rpx;
		padding-bottom: 24rpx;
	}
	.conteArr{
		width: 16rpx;
		height: 16rpx;
	}
	.border-top-list{
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 16rpx;
		padding: 16rpx;
		box-sizing: border-box;
	}
	.left-ings{
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 262rpx;
		height: 148rpx;
	}
	.tabLIst{
		height: 52rpx;
		margin-bottom: 16rpx;
		margin-right: 16rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		padding: 0 16rpx;
		border: 2rpx skyblue solid;
		font-size: 28rpx;
		color: #8F9294;
		text-align: center;
		line-height: 52rpx;
		font-style: normal;
		text-transform: none;
	}
	.tabLIst.active{
		background-color: #3B5EEC;
		color: #FFFFFF;
	}
	.conterArr{
			box-sizing: border-box;
			padding: 0 24rpx;
			padding-top: 8rpx;
		}
			  .title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #0D0E0F;
				text-align: left;
				font-style: normal;
				text-transform: none;
		}
		.questionbank-conter{
			margin-bottom: 40rpx;
		}
		.conte  .lis{
		height: 40rpx;
		background: #F2F4F7;
		box-sizing: border-box;
		padding: 5rpx 12rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		margin-right: 8rpx;
		text-transform: none;
	}
		 .money{
		font-family: MiSans, MiSans;
		font-weight: 600;
		margin-top: 16rpx;
		font-size: 32rpx;
		color: #E26262;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
		 .fuho{
		font-size: 24rpx;
		padding-top: 9rpx;
		margin-right: 5rpx;
	}
</style>